<template>
	<div>
		<el-row class="main" type="flex" justify="center">
			<el-col :span="6">
				<div v-if="$store.state.article_detail.toc" class="laside">					
					<article  class="markdown-body" style="text-align:left" v-html="this.$store.state.article_detail.toc"></article>
				</div>
			</el-col>
			<el-col :span="16">
				<div id="artcle-info">
					<h2 class="text-center"><strong>{{ this.$store.state.article_detail.title }}</strong></h2>
					<!-- 描述：文章信息 -->
					<div class="text-center timeAndView">
						<span class="article-time">
							<i class="el-icon-time"></i>
							发表于：<span>{{ this.$store.state.article_detail.created_time }}</span>
						</span>
						&nbsp;|&nbsp;
						<span class="article-views">
							<i class="el-icon-view"></i>
							阅读量：<span>{{ this.$store.state.article_detail.counter }}</span>
						</span>
					</div>
					<p class="abstract">
						前言：{{ this.$store.state.article_detail.excerpt }}
					</p>
				</div>
				<hr />
				<div id="artcle-content">
					
					<article class="markdown-body" style="text-align:left" v-html="md($store.state.article_detail.body)"></article>
					

				</div>
				<div id="statement">
					<div class="item">{{$t('article.author')}}：it疯子也</div>
					<div class="item">{{$t('article.originalLink')}}：
						<a href="https://www.fengziy.cn/">https://www.fengziy.cn/</a>
					</div>
					<div class="item">{{$t('article.copyright')}}：本博客所有文章除特别声明外,转载请注明出处!</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import 'github-markdown-css/github-markdown.css'  //导入
	import marked from 'marked'
	export default {
		name: 'article',
		methods:{
			md(res){
				return marked(res)
			}
		}
	}
</script>

<style scoped>
	
	.laside{
		/* position: fixed; */
		top: 30px;
		right: 10px;
		width: 300px;
	}
	
	
	#artcle-info {
		padding: 20px;
		background-image: url(../assets/vue.jpg);
		margin-bottom: 40px;
	}
	
	#artcle-info .abstract {
		color: #ffffff;
		border-left: 3px solid #F56C6C;
		padding: 10px;
		background-color: rgba(126, 129, 135, 0.3);
	}
	
	#artcle-info .timeAndView {
		padding: 20px;
		line-height: 30px;
		font-size: 16px;
		color: #ffffff;
	}
	
	pre.has {
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.8);
	}
	
	img.has {
		width: 100%;
	}
	
	#statement {
		border-left: 3px solid #F56C6C;
		padding: 20px;
		background-color: #EBEEF5;
	}
	
	.markdown-body {
	  box-sizing: border-box;
	  min-width: 200px;
	  max-width: 99%;
	  margin: 0 auto;
	  box-shadow: 2px 4px 6px gray;
	  padding-left: 10px;
	  padding-right: 10px;
	  /* padding-top: 40px; */
	  padding-bottom: 45px;
	  margin-bottom: 100px  
	}
	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
		}
	}
	
</style>